<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <ul>
            <li>11111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>555</li>
        </ul>
    </div>
    <script>
        // 高级选择:第一个子节点,最后一个子节点,上一个兄弟节点,下一个兄弟节点
        // 注意:1.包含空白和不包含空白的分成8个属性
        //     2.属性里面包含Element表示不包含空白的
        // firstChild:第一个子节点(包含空白)
        // firstElementChihld:第一个子节点(不包含空白)
        // lastChild:最后一个子节点(包含空白)
        // lastElementChihld:最后一个子节点(不包含空白)
        var ul=document.querySelector('ul');
        // console.log(ul.firstChild);
        // console.log(ul.firstElementChild);
        // console.log(ul.lastChild);
        // console.log(ul.lastElementChild);

        // previousSibling:上一个兄弟节点(包含空白)
        // previousElementSibling:上一个兄弟节点(不包含空白)
        // nextSibling:下一个兄弟节点(包含空白)
        // nextElementSibling:下一个兄弟节点(不包含空白)

        var li3=document.body.children[0].children[0].children[2];
        console.log(li3.previousSibling);
        console.log(li3.previousElementSibling);
        console.log(li3.nextSibling);
        console.log(li3.nextElementSibling);



    </script>
</body>
</html>